import React from "react";
import { useState } from "react";
import './TodoHeader.css';

export default function TodoHeader(props) {
  //解构赋值
  let {addTodo} = props;

  //状态  任务的名称
  let [title, setTitle] = useState('');

  //声明事件回调
  let change = (e) => {
    setTitle(e.target.value);
  }

  //键盘抬起事件
  let keyup = (e) => {
    //判断
    if(e.keyCode === 13){
      //新增一个任务
      addTodo(e.target.value);
      //清空 input 元素的输入值
      setTitle('');
    }
  }

  return (
    <div className="todo-header">
      <input value={title} onKeyUp={keyup} onChange={change} type="text" placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  );
}
